<template>
  <div class="pagination">
    <!-- 首页 -->
    <button
        @click="changePage(1)"
        :disabled="currentPage === 1"
        class="pagination-button"
    >
      首页
    </button>

    <!-- 上一页 -->
    <button
        @click="changePage(currentPage - 1)"
        :disabled="currentPage === 1"
        class="pagination-button"
    >
      上一页
    </button>

    <!-- 当前页前两页 -->
    <template v-for="page in pages" :key="page">
      <button
          v-if="page >= currentPage - 2 && page <= currentPage + 2"
          @click="changePage(page)"
          :class="{ active: currentPage === page }"
          class="pagination-button"
      >
        {{ page }}
      </button>
    </template>

    <!-- 下一页 -->
    <button
        @click="changePage(currentPage + 1)"
        :disabled="currentPage === totalPages"
        class="pagination-button"
    >
      下一页
    </button>

    <!-- 末页 -->
    <button
        @click="changePage(totalPages)"
        :disabled="currentPage === totalPages"
        class="pagination-button"
    >
      末页
    </button>

    <!-- 当前页信息 -->
    <span class="current-page-info">
      当前页：{{ currentPage }} / {{ totalPages }}
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  totalPages: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(['change-page']);

// 生成页码数组
const pages = computed(() => {
  return Array.from({ length: props.totalPages }, (_, i) => i + 1);
});

// 切换页码
const changePage = (page) => {
  if (page >= 1 && page <= props.totalPages) {
    emit('change-page', page);
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.pagination-button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(145deg, #e0e7ff, #d1e0ff); /* 浅蓝色渐变 */
  color: #333;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pagination-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #1e90ff, #0077cc); /* 蓝色渐变 */
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.pagination-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: #f0f4f8; /* 禁用时的背景色 */
  color: #999;
}

.pagination-button.active {
  background: linear-gradient(145deg, #1e90ff, #0077cc); /* 蓝色渐变 */
  color: white;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.current-page-info {
  margin-left: 16px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}
</style>